<template>
    <div style="overflow:scroll">
        <div style="margin-top:5px;margin-bottom:5px;"> 
            <Row>
                <i-col span="5" offset="9">
                    <span> 选择时间:  </span>
                    <!-- <DatePicker type="datetimerange" placeholder="Select date and time" @on-change="time_change" style="width: 300px"></DatePicker> -->
                    <Select v-model="time_range" style="width:200px" @on-change="change_time_range">
                        <Option v-for="item in time_range_list" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </i-col>
            </Row>
        </div>
        <Row>
             <i-col span="12">
                <Card class="top-card">
                    <p slot="title">PV统计</p>
                    <div id="request_over_time" class="top-card-content"></div>
                </Card>
             </i-col>
             <i-col span="4">
                <Card class="top-card">
                    <p slot="title">UV Top10</p>
                    <div id="uv" class="top-card-content"></div>
                </Card>
             </i-col>
             <i-col span="8">
                <Card class="top-card">
                    <p slot="title">耗时接口Top20</p>
                    <div id="request_time_too_long" class="top-card-content">
                        <i-table  border stripe  :columns="format"  :data="show_list" height="280">
                        </i-table >
                        <div style="text-align: center;margin-top: 3px;">
                            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
                        </div>
                    </div>
                </Card>
             </i-col>
        </Row>
        <Row>
             <i-col span="12">
                <Card class="bottom-card">
                    <p slot="title">接口访问Top10</p>
                    <div id="api" class="bottom-card-content"></div>
                </Card>
             </i-col>   
             <i-col span="4">
                <Card class="bottom-card">
                    <p slot="title">系统状态码</p>
                    <div id="status_code" class="bottom-card-content"></div>
                </Card>
             </i-col>          
             <i-col span="8">
                <Card class="bottom-card">
                    <p slot="title">请求耗时%</p>
                    <div id="requesttime" class="bottom-card-content"></div>
                </Card>
             </i-col>
        </Row>

    </div>
</template>
<style scoped>
    /* body {
        overflow-y: auto;
    }  */
    .top-card {
        margin-bottom:2px;
        margin-right: 5px;
        height: 380px;
    }
    .top-card-content {
        height:340px;
    }
    
    
    .bottom-card {
        margin-top:2px;
        margin-right: 5px;
        height: 380px;
    }
    .bottom-card-content {
        height:340px;
    }
    

</style>
<script>

// import echarts from 'echarts'
import * as echarts from 'echarts';
import { 
    get_response_stat,
    get_api_stat,
    get_request_stat,
    get_client_stat,
    get_requesttime_stat,
    sort_requesttime
} from  '@/api'
import { es_cluster_post } from  '@/api/http'
import { show_simple_page } from '@/common/util'


export default {
    data() {
        return {
            format: [
                {
                    title: '请求',key: 'request'
                },
                {
                    title: '请求时间',key: 'requesttime'
                },
            ],
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 10,
            // 时间选择：
            time_range:'过去1天',
            time_range_list:[
                '过去2分钟',
                '过去5分钟',
                '过去15分钟',
                '过去30分钟',
                '过去1小时',
                '过去6小时',
                '过去12小时',
                '过去1天',
                '过去3天',
                '过去7天',
                '过去15天',
                '过去30天',
                '过去60天',
                '过去90天',
            ],
        }
    },
    methods: {
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        change_time_range(value){
            console.log(value)
            this.time_range=value
            this.refresh()
        },
        refresh() {
            // 获取当前时间并转化
            let tr = this.time_range
            let from = "now-1d"
            let to = "now"
            if(tr=='过去2分钟'){
                from="now-2m"
            }else if(tr=='过去5分钟'){
                from="now-5m"
            }else if(tr=="过去15分钟"){
                from="now-15m"
            }else if(tr=="过去30分钟"){
                from="now-30m"
            }else if(tr=="过去1小时"){
                from="now-1h"
            }else if(tr=="过去6小时"){
                from="now-6h"
            }else if(tr=="过去12小时"){
                from="now-12h"
            }else if(tr=="过去1天"){
                from="now-1d"
            }else if(tr=="过去3天"){
                from="now-3d"
            }else if(tr=="过去7天"){
                from="now-7d"
            }else if(tr=="过去15天"){
                from="now-15d"
            }else if(tr=="过去30天"){
                from="now-30d"
            }else if(tr=="过去60天"){
                from="now-60d"
            }else if(tr=="过去90天"){
                from="now-90d"
            }
            let data = {
                "from":from,
                "to": to,
            }
            let myChart1 = echarts.init(document.getElementById('request_over_time'))
            es_cluster_post(get_request_stat,data).then(response=>{
                let data = response.data
                let data_source = data['dataset']
                // console.log(data_source)
                let option1 = {
                    title:{
                        // text: '请求PV',
                    },
                    dataset:{
                        source:data_source
                    },

                    tooltip:{
                    },
                    legend:{
                        // data:['请求PV']
                    },
                    grid:{

                    },
                    xAxis:{
                        type: "category"
                    },

                    yAxis:{
                    },
                    series:[
                        {
                            // name: '请求PV',
                            type: 'bar',
                            encode:{x:0,y:1}
                        },
                    ],
                };
                myChart1.setOption(option1);

            }).catch(error=>{
                console.log(error)
            })
            let uvChart = echarts.init(document.getElementById('uv')) 
            es_cluster_post(get_client_stat,data).then(response=>{
                let data = response.data
                let clientip_list = data['clientip_list']
                let data_source = data['dataset']
                
                let uv_option = {
                    dataset:{
                        source: data_source,
                    },
                    tooltip:{
                        trigger:'item',
                        formatter: '{c} ({d}%)'
                    },
                    legend:{
                        orient:'vertical',
                        left: 10,
                        data: clientip_list,
                    },
                    series:[
                        {
                            type: 'pie',
                            radius:['50%','70%'],

                            encode:{
                                itemName:0,value:1
                            },
                            
                        }
                    ]
                };
                uvChart.setOption(uv_option);

            }).catch(error=>{
                console.log(error)
            })

            let statusCodeChart = echarts.init(document.getElementById('status_code')) 
            es_cluster_post(get_response_stat,data).then(response=>{
                let data = response.data
                let status_code_list = data['status_code_list']
                let data_source = data['dataset']
                
                let status_code_option = {
                    dataset:{
                        source: data_source,
                    },
                    tooltip:{
                        trigger:'item',
                        formatter: '{c} ({d}%)'
                    },
                    legend:{
                        orient:'vertical',
                        left: 10,
                        data: status_code_list,
                    },
                    series:[
                        {
                            type: 'pie',
                            radius:['50%','70%'],

                            encode:{
                                itemName:0,value:1
                            },
                            
                        }
                    ]
                };
                statusCodeChart.setOption(status_code_option);

            }).catch(error=>{
                console.log(error)
            })
            
            let myChart3 = echarts.init(document.getElementById('api')) 
            es_cluster_post(get_api_stat,data).then(response=>{
                let data = response.data
                let api_list = data['api_list']
                let data_source = data['dataset']

                let option3 = {
                    title:{
                        // text: '接口访问次数',
                    },
                    dataset:{
                        source:data_source
                    },

                    tooltip:{
                        trigger: 'axis',
                        axisPointer:{
                            type:'shadow'
                        },
                        formatter: '{c}'
                    },
                    legend:{
                        // data:['接口访问次数']
                    },
                    grid:{
                        left: '30%',
                    },
                    xAxis:{
                        type: 'value',
                        boundaryGap:[0,0.01],
                    },
                    yAxis:{
                        type:'category',
                        data: api_list,
                        
                    },
                    series:[
                        {
                            // name: '接口访问次数',
                            type: 'bar',
                            // data: value_list,
                             color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                            label: {
                                show: true,
                                position: 'right',
                                formatter: '{@[1]} ({@[2]}%)'
                            },
                        },
                    ],
                };
                myChart3.setOption(option3);

            }).catch(error=>{
                console.log(error)
            })

            
            let reqTimeChart = echarts.init(document.getElementById('requesttime')) 
            es_cluster_post(get_requesttime_stat,data).then(response=>{
                let data = response.data
                // let percent_list = data['percent_list']
                let data_source = data['dataset']
                // console.log(data_source)
                let reqTimeOption = {
                    title:{
                        // text: '请求PV',
                    },
                    dataset:{
                        source:data_source
                    },

                    tooltip:{
                    },
                    legend:{
                        // data:['请求PV']
                    },
                    grid:{

                    },
                    xAxis:{
                        type: "category"
                    },

                    yAxis:{
                    },
                    series:[
                        {
                            // name: '请求PV',
                            type: 'bar',
                            encode:{x:0,y:1}
                        },
                    ],
                };
                reqTimeChart.setOption(reqTimeOption);

            }).catch(error=>{
                console.log(error)
            })
            
            
            es_cluster_post(sort_requesttime,data).then(response=>{
                show_simple_page(this,response)
            }).catch(error=>{
                console.log(error)
            })

        },
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
        this.timer = setInterval(this.refresh, 30000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
}
</script>
